<template>
	<view class="container" v-show="isLoaded">
		<!-- 顶部背景 -->
		<view class="top"></view>
		<!-- 滚动容器 -->
		<scroll-view scroll-y="true" class="details">
			<!-- 内容区 -->
			<view class="content">
				<!-- 大图片 -->
				<swiper class="swiper" :indicator-dots="true" indicator-color="rgba(141, 141, 141, 0.3)"
					indicator-active-color="rgb(50, 50, 50)" circular>
					<swiper-item v-for="(item,index) in list.imgs" :key="index">
						<view class="swiper-item" @click="previewImage(index)">
							<image class="itemImage" :src="item" mode="scaleToFill"></image>
						</view>
					</swiper-item>
				</swiper>
				<!-- 梯形 -->
				<view class="tixing"></view>
				<!-- 交流区 -->
				<view class="communicate">
					<view class="infoTop">
						<!-- 发布者标题 -->
						<text class="title">{{list.title}}</text>
						<!-- 发布时间 -->
						<text class="postTime">{{common.myDate(list.postTime, 1)}}</text>
					</view>
					<!-- 发布内容 -->
					<view class="text">{{list.content}}</view>
					<!-- 发布者 -->
					<view class="info">
						<view class="userBox">
							<image :src="list.avator" mode="" class="user"></image>
							<text class="nickName">{{list.nickName}}</text>
						</view>
						<view class="user_data_icon">
							<van-icon name="eye icon" />
							<text class="num">{{list.hits}}</text>
							<van-icon name="like icon" />
							<text class="num likeNum">{{list.liked || 0}}</text>
							<!-- <van-icon name="share" /><text>32</text> -->
						</view>
					</view>
					<view class="price" v-if="list.price">
						{{list.price}}元
					</view>

					<view class="commentsTitle">讨论</view>
					<!-- 讨论区内容 -->
					<view class="user_data" v-for="(item, index) in list.discuss" :key="index">
						<view class="user_box">
							<image :src="item.avator" mode="" class="user"></image>
							<text class="autor">{{item.nickName}}</text>
						</view>
						<text class="detail">{{item.content}}</text>
						<view class="commentsBottom">
							<view class="user_data_icon_taolun">
								<van-icon name="good-job" size="12px" />
								<text class="commentsLike">{{item.like || 0}}</text>
							</view>
							<text class="data">{{common.timesFun(item.postTime)}}</text>
						</view>

					</view>

				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script module="common" src="../../wxcomponents/wxs/common.wxs" lang="wxs"></script>
<script>
	import vanIcon from "../../wxcomponents/vant/dist/icon/index"

	export default {

		name: 'details',
		data() {
			return {
				// 传过来的id
				id: '',
				// 传过来的索引值（根据索引值来判断请求的数据库）
				currentIndex: null,
				// 获取来的数据
				list: {},
				// 是否加载完数据
				isLoaded: false
			};
		},
		components: {
			vanIcon
		},
		methods: {
			//获取用户信息
			getInfo() {
				const {
					id,
					currentIndex
				} = this
				wx.cloud.callFunction({
					name: 'get_details_info',
					data: {
						id,
						currentIndex
					}
				}).then(res => {
					console.log(res);
					this.list = res.result.data
					this.isLoaded = true
					uni.hideLoading()
				})
			},
			// 预览图片
			previewImage(index) {
				console.log(index);
				uni.previewImage({
					urls: this.list.imgs,
					current: index
				})
			}
		},

		onLoad(options) {
			uni.showLoading({
				title: '加载中...',
				mask: true
			})
			console.log(options);
			this.id = options.id
			this.currentIndex = parseInt(options.type)
			wx.cloud.callFunction({
				name: 'update_hits_num',
				data: {
					id: this.id,
					currentIndex: this.currentIndex
				}
			}).then(res => {
				this.getInfo()
			})

		}
	}
</script>

<style scoped lang="scss">
	.container {
		box-sizing: border-box;

		// 顶部背景
		.top {
			height: 160rpx;
			background-color: #5a53c8;
			position: relative;
		}

		//滚动视图
		.details {
			position: absolute;
			top: 60rpx;
			left: 0;
			width: 100%;
			border-radius: 35rpx 35rpx 0 0;

			//滚动视图里的内容区
			.content {
				height: 2000rpx;
				padding: 10rpx;
				margin-top: 10rpx;
				border-radius: 35rpx 35rpx 0 0;
				background-color: #ffffff;
				position: sticky;
				top: 0;

				//轮播图
				.swiper {
					position: absolute;
					top: 20rpx;
					left: 50%;
					margin-left: -300rpx;
					background-color: #f6f6f6;
					width: 600rpx;
					height: 650rpx;
					border-radius: 8rpx;
					box-shadow: 0 10rpx 20rpx #b1b1b1;
					z-index: 10;

					.swiper-item {
						width: 100%;
						height: 100%;
						display: flex;
						justify-content: center;
						align-items: center;

					}
				}

				//梯形
				.tixing {
					position: absolute;
					top: 616rpx;
					left: 0;
					width: 100%;
					height: 70rpx;
					box-shadow: 10rpx -20rpx 30rpx black;
					background-color: #d8d8d8;
					clip-path: polygon(30rpx 0,
							720rpx 0,
							100% 100%,
							0% 100%);
				}

				// 包括发布者和讨论内容
				.communicate {
					display: flex;
					justify-content: center;
					flex-direction: column;
					align-items: center;
					position: absolute;
					top: 686rpx;
					left: 0;
					width: 100%;
					background-color: #ffffff;

					.infoTop {
						width: 95%;
						display: flex;
						align-items: center;
						justify-content: space-between;
						margin: 20rpx 0;

						.title {
							font-size: 40rpx;
							font-weight: bold;
						}

						.postTime {
							font-size: 32rpx;
							color: #b1b1b1;
						}
					}

					.text {
						font-size: 34rpx;
						padding: 0 25rpx;
						margin-bottom: 20rpx;
						letter-spacing: 4rpx;
					}

					.info {
						width: 92%;
						display: flex;
						justify-content: space-between;
						align-items: center;
						padding: 10rpx 0;
						border-bottom: 1rpx solid #e8e8e8;

						.userBox {
							display: flex;
							align-items: center;

							// 所有用户的头像
							.user {
								width: 60rpx;
								height: 60rpx;
								background-color: #666;
								border-radius: 50%;
								margin-right: 20rpx;
							}

							.nickName {
								font-size: 32rpx;
							}

						}

						.user_data_icon {
							.icon {
								width: 38rpx;
								height: 38rpx;
								// margin: 0 10rpx;
							}

							.num {
								font-size: 32rpx;
								margin: 0 10rpx;
							}

							.likeNum {
								padding-top: 8rpx;
							}
						}
					}
					
					.price{
						width: 90%;
						color: darkred;
						font-size: 36rpx;
						font-weight: bold;
						display: flex;
						justify-content: flex-end;
					}

					.commentsTitle {
						margin-top: 30rpx;
						width: 95%;
						position: relative;
						left: 0;
						font-size: 50rpx;
						font-weight: bold;
					}

					// 讨论区每一个用户区域
					.user_data {
						display: flex;
						flex-direction: column;
						margin-top: 15rpx;
						margin-left: 30rpx;
						align-items: center;
						border-bottom: 1px solid #f5f5f5;
						justify-content: space-between;
						font-size: 13px;
						position: relative;

						// 用户头像和文字区域
						.user_box {
							margin-top: 20rpx;
							display: flex;
							flex-direction: row;
							align-items: center;
							width: 95%;

							.user {
								width: 60rpx;
								height: 60rpx;
								border-radius: 50%;
							}

							// 姓名
							.autor {
								font-size: 14px;
								margin-left: 20rpx;
								color: #868686;
							}
						}

						// 日期
						.data {
							margin-right: 38rpx;
							color: #666;
						}

						// 详情
						.detail {
							width: 90%;
							margin: 20rpx 0;
							line-height: 44rpx;
							letter-spacing: 2rpx;
							font-size: 30rpx;
							color: #666;
							padding: 0 10rpx;
						}

						.commentsBottom {
							display: flex;
							width: 100%;
							justify-content: flex-end;
							align-items: center;
							margin-bottom: 20rpx;


							// 用户点赞区域
							.user_data_icon_taolun {
								display: flex;
								align-items: center;

								// 图标
								.van-icon {
									width: 30rpx;
									height: 30rpx;
								}

								// 文字
								.commentsLike {
									// display: block;
									margin-left: 10rpx;
									font-size: 26rpx;
									margin-top: -5rpx;
								}
							}

							.data {
								margin-left: 50rpx;
								margin-top: -5rpx;
							}
						}

					}
				}
			}
		}
	}
</style>
